<template>
	<view>
		<Header title="退款申请" :showBack="true"></Header>
		<view class="container">
			<!-- 按钮 -->
			<view class="box">
				<view class="complaint-box show-height">
					<view class="label">
						<view class="title">投诉原因</view>
						<view class="selected">
							<picker class="pickers" mode="selector" :range="causeList" @change="changeCause" :value="index" :range-key="'cause'">
								<view class="pickers">
									<view :class="index == -1 ? 'plader' : ''">{{ causeList[index].cause || '请选择您遇到的问题' }}</view>
									<image src="../../static/img/go.png" mode=""></image>
								</view>
							</picker>
						</view>
					</view>
					<view class="label">
						<view class="title">订单号</view>
						<view class="selected ipt">
							<input type="text" v-model="orderNo" placeholder-style="font-size:13px;" disabled />
						</view>
					</view>
					<view class="label">
						<view class="title">联系电话</view>
						<view class="selected ipt">
							<input type="text" v-model="upData.phone" placeholder="便于商家和您联系" placeholder-style="font-size:13px;" />
						</view>
					</view>
					<view class="label">
						<view class="title">补充描述</view>
						<view class="selected tarea">
							<textarea v-model="upData.description" placeholder="描述投诉该订单的原因" id="" cols="30" rows="10"></textarea>
						</view>
					</view>
					<view class="label">
						<view class="title attention-title">
							图片凭证
							<text>*请上传支付截图</text>
						</view>
						<view class="pic-list">
							<block v-for="(item, index) in upData.imgUrls" :key="index">
								<view class="pic">
									<image class="pic" :src="item"></image>
									<view class="delete-pic" @click="deletePic(index)">×</view>
								</view>
							</block>
							<view v-if="upData.imgUrls.length < 3" class="add-pic" @click="chooseImg()"></view>
						</view>
					</view>
					<view class="btn" @click="submit" v-if="isCanClick">提交</view>
					<view class="btn gray" v-else>提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: uni.getStorageSync('info'),
			baseUrl: getApp().globalData.baseUrl,
			index: -1,
			causeList: [{ cause: '---', id: -1 }],
			upData: {
				phone: '',
				description: '',
				imgUrls: []
			},
			showPrivacy: false,
			orderNo: '',
			mId: '',
			isCanClick: true,
		};
	},
	onLoad(e) {
		this.orderNo = e.orderNo;
		this.mId = e.mId
		this.getType();
	},
	methods: {
		getType() {
			this.$http('/service/api/dictionaries/cause', {}, (res) => {
				if (res.data.succeeded) {
					this.causeList = res.data.data;
				}
			});
		},
		deletePic(index) {
			this.upData.imgUrls.splice(index, 1);
		},
		guid() {
			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
				var r = (Math.random() * 16) | 0,
					v = c == 'x' ? r : (r & 0x3) | 0x8;
				return v.toString(16);
			});
		},

		chooseImg() {
			let that = this;
			wx.chooseImage({
			// wx.chooseMedia({
				count: 1,
				success(imgRes) {
					// if(imgRes.tempFiles[0].size<200000){
					// if(imgRes.tempFiles[0].size<307200){
					that.uploadFile(imgRes.tempFilePaths[0], 1);
					return;
					uni.getImageInfo({
						src: imgRes.tempFilePaths[0],
						success(res) {
							let canvasWidth = res.width; //图片原始长宽
							let canvasHeight = res.height;
							let canvas = document.createElement('canvas');
							let ctx = canvas.getContext('2d');
							canvas.width = canvasWidth / 2;
							canvas.height = canvasHeight / 2;
							let img = new Image();
							img.src = res.path;
							img.onload = () => {
								ctx.drawImage(img, 0, 0, canvasWidth / 2, canvasHeight / 2);
								canvas.toBlob(
									(fileSrc) => {
										that.uploadFile(fileSrc, 2);
									},
									imgRes.tempFiles[0].type,
									0.4
								);
							};
						}
					});
				}
			});
		},
		uploadFile(path, y) {
			let file;
			if (y == 2) {
				file = new File([path], new Date().getTime() + '.png');
			}
			let that = this;
			uni.uploadFile({
				url: this.baseUrl + '/service/api/PubApplyRefund/upload', //仅为示例，非真实的接口地址
				name: 'file',
				filePath: y == 1 ? path : '',
				file: y == 2 ? file : '',
				success: (uploadFileRes) => {
					let returnData = JSON.parse(uploadFileRes.data);
					if (!returnData.succeeded) {
						return uni.showToast({
							title: returnData.errors,
							icon: 'none'
						});
					}
					let datas = returnData.data;
					let picUrl = `${datas.domainName}${datas.fileUrl}`;
					this.upData.imgUrls.push(picUrl);
				},
				fail(err) {
				}
			});
		},
		changeCause(e) {
			if (this.index == e.detail.value) return;
			this.index = e.detail.value;
		},
		changeComplaint() {
			this.show = !this.show;
		},
		showMyTost(title) {
			uni.showToast({
				title,
				icon: 'none'
			});
		},
		addRefundApply(data) {
			this.isCanClick = false
			this.$http('/service/api/PubApplyRefund/add', data, (res) => {
				if (res.data.succeeded) {
					this.showMyTost('提交成功');
					this.show = false;
					this.isCanClick = true
				} else {
					uni.showToast({
						title: JSON.stringify(res.data.errors),
						icon: 'none'
					});
				}
			});
		},
		submit() {
			let data = {
				phone: this.upData.phone,
				imgUrls: this.upData.imgUrls,
				description: this.upData.description,
				complaintType: 1,
				causeId: this.causeList[this.index]?.id,
				tenantId: this.info.tenantId,
				merchantOrderNo: this.orderNo,
				deviceNo: this.mId
			};
			if(!data.causeId){
				uni.showToast({
					title: '请选择投诉申请原因！',
					icon: 'none'
				})
				return;
			}
			uni.showModal({
				content: '是否确认提交？',
				success: (res) => {
					this.addRefundApply(data);
				}
			});
		}
	}
};
</script>

<style lang="less">
@import url('less/index.less');
</style>
